<template>
  <div class="table-component">
    <div class="submit-btns">
      <div></div>
      <div>
        <el-button type="primary" class="submit-btn-add" @click="add">
          <img class="icon-img" :src="iconAdd" alt="" />
          新增</el-button
        >
        <el-button type="primary" class="submit-btn-import" @click="importData">
          <img class="icon-img" :src="iconImport" alt="" />导入</el-button
        >
      </div>
    </div>
    <!-- <div>人员管理{{ searchModel }}</div> -->
    <div class="table">
      <el-table
        :data="table.data"
        :loading="table.loading"
        style="width: 100%"
        :header-cell-style="{
          background: '#F1F1F1',
          'font-size': '14px',
          'font-weight': 600,
          color: '#333333',
        }"
        :cell-style="{
          'font-size': '14px',
          'font-weight': 400,
          color: '#333333',
        }"
      >
        <el-table-column label="序号" width="80">
          <template #default="scope">
            {{ (scope.$index + 1).toString().padStart(2, "0") }}
          </template>
        </el-table-column>
        <el-table-column prop="userName" label="收费员账号" />
        <el-table-column prop="realName" label="员工姓名" />
        <el-table-column prop="phone" label="手机号码" />
        <el-table-column prop="email" label="电子邮箱" width="180" />
        <el-table-column prop="cantonName" label="所在行政区" />
        <el-table-column prop="squadronName" label="所属中队" />
        <el-table-column prop="sectionName" label="默认路段" />
        <el-table-column label="账号状态">
          <template #default="scope">
            <div class="status-color">
              <div
                :class="
                  scope.row.status == false ? 'status-red' : 'status-blue'
                "
              ></div>
              <div>{{ scope.row.status == false ? "已禁用" : "启用中" }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250">
          <template #default="scope">
            <el-button
              @click="edit(scope.row)"
              type="primary"
              size="small"
              link
              style="color: #007aff"
              >编辑</el-button
            >
            <el-button
              v-if="scope.row.status == true"
              @click="accountStatus(scope.row)"
              type="primary"
              size="small"
              link
              style="color: #007aff"
              >停用账号</el-button
            >
            <el-button
              v-if="scope.row.status == false"
              @click="accountStatus(scope.row)"
              type="primary"
              size="small"
              link
              style="color: #007aff"
              >重启账号</el-button
            >
            <el-button
              v-if="scope.row.status == true"
              @click="resetPassword(scope.row)"
              type="primary"
              size="small"
              link
              style="color: #007aff"
              >重置密码</el-button
            >
            <el-button
              @click="journal(scope.row)"
              type="primary"
              size="small"
              link
              style="color: #007aff"
              >日志</el-button
            >
          </template>
        </el-table-column>
        <template #empty>
          <el-empty :image="imgNone" />
        </template>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :page-sizes="pagination.pageSizes"
        layout="total,sizes, prev, pager, next, jumper"
        :total="table.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog
      v-model="dialogVisible"
      :title="title"
      destroy-on-close
      :before-close="handleClose"
      :close-on-click-modal="false"
      :width="componentTag === journalComponent ? '800px' : '500px'"
    >
      <template #header>
        <div v-if="title == '新增收费员信息' || title == '编辑收费员信息'">
          <span>{{ title }}</span>
          <span class="tips">初始密码将发送至手机号码</span>
        </div>
      </template>
      <!-- 收费员详情 -->

      <component
        :is="componentTag"
        @operationDone="operationDone"
        :operationId="operationId"
      >
      </component>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref, watch, shallowRef } from "vue";
import iconAdd from "@/assets/image/btn/icon-add.png";
import iconImport from "@/assets/image/btn/icon-import.png";
const imgNone = new URL("@/assets/image/imgNone.png", import.meta.url).href;
import {
  getCashier,
  getAccountStatus,
  getResetpwd,
} from "../request.js";
import addComponent from "./addComponent.vue";
import editComponent from "./editComponent.vue";
import journalComponent from "./journalComponent.vue";
import importComponent from "./importComponent.vue";
const props = defineProps({
  searchModel: {
    type: Object,
    default: () => {},
  },
});

// 搜索
const searchModel = ref({
  keyword: "",
  administrativeRegion: "",
  belongingSquadron: "",
  status: "",
});

// 弹窗
const title = ref("");
const dialogVisible = ref(false);
const componentTag = shallowRef("");
const operationId = ref("");
const operationDone = (r) => {
  dialogVisible.value = false;
  operationId.value = "";
  if (!r) {
    getData();
  }
};

// 新增按钮
const add = () => {
  title.value = "新增收费员信息";
  componentTag.value = addComponent;
  dialogVisible.value = true;
};

// 编辑按钮
const edit = (row) => {
  title.value = "编辑收费员信息";
  operationId.value = row;
  componentTag.value = editComponent;
  dialogVisible.value = true;
};

// 导入
const importData = () => {
  title.value = "导入收费人员信息";
  componentTag.value = importComponent;
  dialogVisible.value = true;
};

// 重启/停用账号按钮
const accountStatus = async (row) => {
  ElMessageBox.confirm(
    `您确定要${row.status == true ? "停用" : "启用"}用户[${row.realName}]吗？`,
    "温馨提示",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  ).then(async () => {
    await getAccountStatus({
      userId: row.userId,
      status: !row.status,
    }).then((res) => {
      // console.log("res ===>", res);
      if (res.data.code === 0) {
        getData();
        ElMessage({
          type: "success",
          message: res.data.result,
        });
      }
    });
  });
};

// 重置密码按钮
const resetPassword = async (row) => {
  ElMessageBox.confirm(
    `重置密码将会发到用户的手机,您确定要重置用户[${row.realName}]的密码吗?`,
    "温馨提示",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  ).then(async () => {
    await getResetpwd(row.userId).then((res) => {
      // console.log("res ===>", res);
      if (res.data.code === 0) {
        ElMessage({
          type: "success",
          message: res.data.result,
        });
      }
    });
  });
};

// 日志按钮
const journal = (row) => {
  title.value = `收费员详情 [${row.realName}]`;
  operationId.value = row;
  componentTag.value = journalComponent;
  dialogVisible.value = true;
};

// 表格
const table = reactive({
  data: [],
  total: 0,
  loading: true,
});

const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  pageSizes: [10, 20, 30, 50],
});

const getData = async () => {
  const res = await getCashier({
    keyword: searchModel.value.keyword,
    cantonId: searchModel.value.administrativeRegion,
    squadronId: searchModel.value.belongingSquadron,
    status: searchModel.value.status,
    pageNo: pagination.currentPage,
    pageSize: pagination.pageSize,
  });
  console.log(res);
  if (res.data.code === 0) {
    table.data = res.data.result.items;
    table.total = parseInt(res.data.result.total);
    table.loading = false;
  }
};

const handleCurrentChange = (value) => {
  pagination.currentPage = value;
  getData();
};

const handleSizeChange = (value) => {
  pagination.pageSize = value;
  getData();
};

watch(
  () => props.searchModel,
  (value) => {
    // console.log(`output->value`, value);
    searchModel.value = value;
    getData();
    // console.log(searchModel.value);
  },
  { deep: true }
);

getData();
</script>

<style lang="less" scoped>
.table-component {
  .submit-btns {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .submit-btn-add {
    background: #007aff;
    border: 1px solid #007aff;
    border-radius: 2px;
    margin-left: 87px;
    padding: 5px 16px;
  }
  .submit-btn-import {
    background: #00d1ff;
    border: 1px solid #00d1ff;
    border-radius: 2px;
    margin-left: 12px;
    padding: 5px 16px;
  }
  .icon-img {
    width: 16px;
    height: 16px;
    margin-right: 8px;
  }
  .table {
    margin-bottom: 15px;
    .status-color {
      display: flex;
      align-items: center;
    }
    .status-red {
      width: 6px;
      height: 6px;
      background: #ed1c24;
      margin-right: 8px;
      border-radius: 50%;
    }
    .status-blue {
      width: 6px;
      height: 6px;
      background: #007aff;
      margin-right: 8px;
      border-radius: 50%;
    }
  }
  .pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .tips {
    font-weight: 400;
    font-size: 12px;
    color: #999999;
    margin-left: 8px;
  }
}
</style>